<template>
  <page-layout>

    <a-row :gutter="[10, 10]">
      <a-col :span="24">
        <a-page-header
          class="page-head"
          style="background: #fff;"
          title="新增渠道"
          @back="() => $router.back()">
          <template v-slot:extra>
            <a-button type="primary">{{t(`button.save`)}}</a-button>
          </template>
        </a-page-header>
        <div class="pre-title">基础信息</div>
      </a-col>
      <a-col :span="24">
        <a-card>
          <a-form :model="modelFrom" :rules="formRules" :labelCol="{span: 9}" ref="modelFrom">
            <a-row>
              <a-col :span="8">
                <a-form-item label="渠道类型" ref="type" name="type">
                  <a-select style="width:100%" :default-value="modelFrom.type" @change="handleChange">
                    <a-select-option v-for="(item, index) in typeaList" :key="index" :value="item.value">
                      {{item.label}}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="渠道名称" ref="name" name="name">
                  <a-input v-model="modelFrom.name" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="渠道负责人" ref="user" name="user">
                  <a-input v-model="modelFrom.user" placeholder="请选择">
                    <template #addonAfter>
                      <div class="primary-color cursor-pointer" @click="openDialog('channelVisible')">选择</div>
                    </template>
                  </a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="绑定学生" ref="student" name="student">
                  <a-input v-model="modelFrom.student" placeholder="请选择">
                    <template #addonAfter>
                      <div class="primary-color cursor-pointer" @click="openDialog('studentVisible')">选择</div>
                    </template>
                  </a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="电话" ref="phone" name="phone">
                  <a-input-group compact placeholder="请选择">
                    <a-select style="width: 30%;" :default-value="modelFrom.phoneTitle">
                      <a-select-option v-for="(item, index) in 5" :key="index" :value="item">
                        {{item}}
                      </a-select-option>
                    </a-select>
                    <a-input style="width: 70%" :default-value="modelFrom.phone" placeholder="默认同渠道小程序账号" />
                  </a-input-group>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="Email" ref="email" name="email">
                  <a-input v-model="modelFrom.email" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="证件类型" ref="types" name="types">
                  <a-select style="width:100%" placeholder="请选择" :default-value="modelFrom.types" @change="handleChange">
                    <a-select-option v-for="(item, index) in typeaList" :key="index" :value="item.value">
                      {{item.label}}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="证件号" ref="nums" name="nums">
                  <a-input v-model="modelFrom.nums" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="收款账号" ref="banknum" name="banknum">
                  <a-input v-model="modelFrom.banknum" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="业绩计算点" ref="point" name="point">
                  <a-select style="width:100%" placeholder="请选择" :default-value="modelFrom.point" @change="handleChange">
                    <a-select-option v-for="(item, index) in typeaList" :key="index" :value="item.value">
                      {{item.label}}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="合作开始时间" ref="time" name="time">
                  <a-input v-model="modelFrom.time" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="业绩预估" ref="price" name="price">
                  <a-input v-model="modelFrom.price" suffix="/元" placeholder="请输入" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="所属片区" ref="area" name="area">
                  <a-select style="width:100%" placeholder="请选择" :default-value="modelFrom.area" @change="handleChange">
                    <a-select-option v-for="(item, index) in typeaList" :key="index" :value="item.value">
                      {{item.label}}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="负责学校" ref="school" name="school">
                  <a-input v-model="modelFrom.school" placeholder="请选择">
                    <template #addonAfter>
                      <div class="primary-color cursor-pointer" @click="openDialog('universityVisible')">选择</div>
                    </template>
                  </a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="对接人" ref="person" name="person">
                  <a-input v-model="modelFrom.person" placeholder="请输入"/>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="组织性质" ref="person" name="person">
                  <a-input v-model="modelFrom.person" placeholder="请输入"/>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="合作形式" ref="cooperation" name="cooperation">
                  <a-input v-model="modelFrom.cooperation" placeholder="请输入"/>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="渠道简介" :labelCol="{span: 3}" ref="content" name="content">
                  <a-textarea :auto-size="{ minRows: 2, maxRows: 6 }" placeholder="请输入" v-model="modelFrom.content" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-card>
        <div class="pre-title">佣金配置</div>
        <a-card>
          <a-form :rules="formRules" :labelCol="{span: 9}" ref="modelFrom">
            <a-row>
              <a-col :span="8">
                <a-form-item label="计算类型">
                  <a-select style="width:100%" :default-value="modelFrom.com" @change="handleChange">
                    <a-select-option v-for="(item, index) in typeaList" :key="index" :value="item.value">
                      {{item.label}}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="佣金百分比">
                  <a-input v-model="modelFrom.price" placeholder="请输入"/>
                </a-form-item>
              </a-col>
              <a-col :span="8"></a-col>
            </a-row>
            <a-row>
              <a-col :span="13">
                <a-form-item :labelCol="{span: 4}" label="签约人数">
                  <a-input style="width: 45%" v-model="modelFrom.sum" placeholder="请输入"/>
                  -
                  <a-input style="width: 45%" v-model="modelFrom.sum" placeholder="请输入"/>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="佣金百分比">
                  <a-input v-model="modelFrom.price" placeholder="请输入" suffix="%" />
                </a-form-item>
              </a-col>
              <a-col :span="3">
                <a-button style="margin-left: 20px;" type="primary">
                  按钮
                </a-button>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="13">
                <a-form-item :labelCol="{span: 4}" label="签约人数">
                  <a-input style="width: 45%" v-model="modelFrom.sum" placeholder="请输入"/>
                  -
                  <a-input style="width: 45%" v-model="modelFrom.sum" placeholder="请输入"/>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="佣金百分比">
                  <a-input v-model="modelFrom.price" placeholder="请输入" suffix="%" />
                </a-form-item>
              </a-col>
              <a-col :span="3">
                <a-button style="margin-left: 20px;" type="danger">
                  删除
                </a-button>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="13">
                <a-form-item :labelCol="{span: 4}" label="签约人数">
                  <a-input style="width: 45%" v-model="modelFrom.sum" placeholder="请输入"/>
                  -
                  <a-input style="width: 45%" v-model="modelFrom.sum" placeholder="请输入"/>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="佣金百分比">
                  <a-input v-model="modelFrom.price" placeholder="请输入" suffix="%" />
                </a-form-item>
              </a-col>
              <a-col :span="3">
                <a-button style="margin-left: 20px;" type="danger">
                  删除
                </a-button>
              </a-col>
            </a-row>
          </a-form>
        </a-card>
        <div class="pre-title">基础薪酬</div>
        <a-card>
          <a-form :rules="formRules" :labelCol="{span: 9}" ref="modelFrom">
            <a-row :gutter="10">
              <a-col :span="4">
                <div class="title" style="padding-bottom: 30px;">校园大使基础奖励配置</div>
              </a-col>
              <a-col :span="8"></a-col>
              <a-col :span="8"></a-col>
            </a-row>
            <a-row :gutter="10">
              <a-col :span="4">
                <div class="title">建群拉人</div>
              </a-col>
              <a-col :span="8">
                <a-form-item label="试用期奖励">
                  <a-input v-model="modelFrom.price" placeholder="请输入金额" suffix="元/个群" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="转正后奖励">
                  <a-input v-model="modelFrom.price" placeholder="请输入金额" suffix="元/个群" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="10">
              <a-col :span="4">
                <div class="title">收集各类学生群资源</div>
              </a-col>
              <a-col :span="8">
                <a-form-item label="试用期奖励">
                  <a-input v-model="modelFrom.price" placeholder="请输入金额" suffix="元/个群" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="转正后奖励">
                  <a-input v-model="modelFrom.price" placeholder="请输入金额" suffix="元/个群" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="10">
              <a-col :span="4">
                <div class="title">寻求当地赞助合作</div>
              </a-col>
              <a-col :span="8">
                <a-form-item label="试用期奖励">
                  <a-input v-model="modelFrom.price" placeholder="请输入金额" suffix="元/个" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="转正后奖励">
                  <a-input v-model="modelFrom.price" placeholder="请输入金额" suffix="元/个" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="10">
              <a-col :span="4">
                <div class="title">线下活动摆展等</div>
              </a-col>
              <a-col :span="8">
                <a-form-item label="试用期奖励">
                  <a-input v-model="modelFrom.price" placeholder="请输入金额" suffix="元/个" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="转正后奖励">
                  <a-input v-model="modelFrom.price" placeholder="请输入金额" suffix="元/个" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="10">
              <a-col :span="4">
                <div class="title">活动策划</div>
              </a-col>
              <a-col :span="8">
                <a-form-item label="试用期奖励">
                  <a-input v-model="modelFrom.price" placeholder="请输入金额" suffix="元/场" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="转正后奖励">
                  <a-input v-model="modelFrom.price" placeholder="请输入金额" suffix="元/场" />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="10">
              <a-col :span="4">
                <div class="title">每月推广工作</div>
              </a-col>
              <a-col :span="8">
                <a-form-item label="试用期奖励">
                  <a-input v-model="modelFrom.price" placeholder="请输入金额" suffix="元/场" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="转正后奖励">
                  <a-input v-model="modelFrom.price" placeholder="请输入金额" suffix="元/场" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-card>
        <div class="pre-title">附件信息</div>
        <a-card>
          <a-form :rules="formRules">
            <a-row>
              <a-col :span="24">
                <a-form-item label="协议" key="agree" name="agree" :labelCol="{span: 3}" :wrapperCol="{span: 10}">
                  <a-upload
                    name="file"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    :headers="headers"
                    @change="handleChange">
                    <a-button> <a-icon type="upload" />上传文件</a-button>
                  </a-upload>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="其他附件" :labelCol="{span: 3}" :wrapperCol="{span: 10}">
                  <a-upload
                    name="file"
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    :headers="headers"
                    @change="handleChange">
                    <a-button> <a-icon type="upload" />上传文件</a-button>
                  </a-upload>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-card>
      </a-col>
    </a-row>
    <student :visible="formState.studentVisible"
                @selectUniversity="selectUniversity"
                @close="closeDialog"
    />
    <school :visible="formState.universityVisible"
                @selectUniversity="selectUniversity"
                @close="closeDialog"
    />
    <channel :visible="formState.channelVisible"
                @selectUniversity="selectUniversity"
                @close="closeChannelDialog"
    />
    <userTree :visible="formState.visibleUserTree" @close="closeGive" :record="formState.recordGive"></userTree>
  </page-layout>
</template>

<script>
import school from './modal/school.vue'
import student from './modal/student.vue'
import channel from './modal/channel.vue'
import userTree from './modal/user-tree'

import { computed, reactive } from 'vue'
import { useI18n } from "vue-i18n";
export default {
  components: {
    student,
    userTree,
    channel,
    school
  },
  watch: {
    'modelFrom.flow': {
      handler(value) {
        console.log('value', value==1)
      },
      deep: true
    }
  },
  setup() {
    const { t } = useI18n()

    const modelFrom = reactive({
      name: '',
      flow: 3,
      type: ''
    })

    const typeaList = [
      { label: '学生会', value: 1},
      { label: '校园大使', value: 2},
      { label: 'B端机构', value: 3},
    ]

    const closeGive = function(){
        formState.visibleUserTree = false;
    }
    const planeA = computed(() => modelFrom.flow == 1)
    const planeB = computed(() => modelFrom.flow == 2)
    const planeC = computed(() => modelFrom.flow == 3)
    const formState = reactive({
      name: '',
      department: '',
      post: '',
      universe: '',
      charge: '',
      phone: '',
      email: '',
      sex: '',
      status: '',
      address: '',
      universityVisible: false,
      studentVisible: false,
      channelVisible: false,
      visibleUserTree: false,
      recordGive: {},
    })
    const labelCol = { span: 3, offset: 12 }
    const wrapperCol = { span: 14 }
    const formRules = {
      name: [{ required: true, message: '请输入渠道名称', trigger: 'blur'}],
      types: [{ required: true, message: '请选择证件类型', trigger: 'blur'}],
      nums: [{ required: true, message: '请输入证件号', trigger: 'blur'}],
      agree: [{ required: true, message: '请选择协议', trigger: 'blur'}],
    }

    const openDialog = (type) => {
      formState[type] = true
    }
    const handleChange = (value) => {
      console.log('value: handleChange', value);
    }

    const closeDialog = (type) => {
      console.log('type: closeDialog', type);
      formState[type] = false
    }
    const closeChannelDialog = (type) => {
      formState[type] = false
    }

    const selectUniversity = (value) => {
      console.log(value, 'value')
    }

    const onTimeChange = (value) => {
      console.log('value: ', value);
    }
    const onTimeOk = (value) => {
      console.log('value: ', value);
    }
    const onChangeRadio = (value) => {
      modelFrom.flow = value.target.value
      console.log('modelFrom.flow: ', modelFrom.flow);
    }
    const handleClose = (value) => {
      console.log('value: ', value);
    }
    const handleSelect = (value) => {
      formState[value] = true;
    }
    const plainOptions = [
      { label: '公众号', value: '1' },
      { label: '网页', value: '2' },
      { label: '销售微信', value: '3' },
    ];
    return {
      t,
      modelFrom,
      formRules,
      labelCol,
      wrapperCol,
      openDialog,
      formState,
      handleChange,
      selectUniversity,
      closeDialog,
      onTimeChange,
      onTimeOk,
      plainOptions,
      onChangeRadio,
      handleClose,
      handleSelect,
      planeA,
      planeB,
      planeC,
      closeGive,
      closeChannelDialog,
      typeaList,
    }   
  }
}
</script>

<style lang="less" scoped>
  .page-head {

    /deep/ .ant-page-header-heading-title {
      color: #2d8cf0;
    }
  }

  .pre-title {
    padding: 10px 25px;
    background-color: #f5f5f5;
    color: #555;
  }

  .price-title {
    padding: 10px 0;
  }

  .title {
    width: 100%;
    text-align: right;
    // padding-right: 20px;
  }

  .content-box {
    position: relative;
    width: 100%;
    min-height: 50px;
    border: 1px solid #d9d9d9;
    background-color: #fff;
    background-image: none;
    border-radius: 2px;
    padding: 10px 40px 10px 10px;

    .selects {
      position: absolute;
      color: #2d8cf0;
      right: 5px;
      cursor: pointer;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .form-label {

    /deep/ .ant-form-item-label > label::after {
      content: '' !important;
    }
  }

  /deep/ .ant-row {
    row-gap: 0 !important;
  }
</style>